<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>主题文档 - 扩展 Shortcodes - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."><meta property="og:title" content="主题文档 - 扩展 Shortcodes" />
<meta property="og:description" content="LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/posts/theme-documentation-extended-shortcodes/" />
<meta property="og:image" content="https://luckly.work/posts/theme-documentation-extended-shortcodes/featured-image.jpg"/>
<meta property="article:published_time" content="2020-03-03T16:29:59+08:00" />
<meta property="article:modified_time" content="2020-03-03T16:29:59+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/posts/theme-documentation-extended-shortcodes/featured-image.jpg"/>
<meta name="twitter:title" content="主题文档 - 扩展 Shortcodes"/>
<meta name="twitter:description" content="LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."/>
<meta name="application-name" content="Lucklyの博客 - 在阅读中遇见自己">
<meta name="apple-mobile-web-app-title" content="Lucklyの博客 - 在阅读中遇见自己"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/posts/theme-documentation-extended-shortcodes/" /><link rel="prev" href="https://luckly.work/posts/basic-markdown-syntax/" /><link rel="next" href="https://luckly.work/posts/theme-documentation-built-in-shortcodes/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "主题文档 - 扩展 Shortcodes",
        "inLanguage": "en",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/posts\/theme-documentation-extended-shortcodes\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/posts\/theme-documentation-extended-shortcodes\/featured-image.jpg",
                            "width":  1280 ,
                            "height":  720 
                        }],"genre": "posts","keywords": "shortcodes","wordcount":  5584 ,
        "url": "https:\/\/luckly.work\/posts\/theme-documentation-extended-shortcodes\/","datePublished": "2020-03-03T16:29:59+08:00","dateModified": "2020-03-03T16:29:59+08:00","publisher": {
            "@type": "Organization",
            "name": "Dillon"},"author": {
                "@type": "Person",
                "name": "Dillon"
            },"description": "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="Lucklyの博客 - 在阅读中遇见自己">Lucklyの博客 - 在阅读中遇见自己</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/"> 首页 </a><a class="menu-item" href="/post/"> 归档 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/about/"> 关于我 </a><a class="menu-item" href="/friend/" title="友链"> 友链 </a><a class="menu-item" href="https://github.com/ITmxs/" rel="noopener noreffer" target="_blank"> 阅读清单 </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="Lucklyの博客 - 在阅读中遇见自己">Lucklyの博客 - 在阅读中遇见自己</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="/" title="">首页</a><a class="menu-item" href="/post/" title="">归档</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/about/" title="">关于我</a><a class="menu-item" href="/friend/" title="友链">友链</a><a class="menu-item" href="https://github.com/ITmxs/" title="" rel="noopener noreffer" target="_blank">阅读清单</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">主题文档 - 扩展 Shortcodes</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://dillonzq.com" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>Dillon</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/documentation/"><i class="far fa-folder fa-fw"></i>文档</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2020-03-03">2020-03-03</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 5584 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 12 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="/posts/theme-documentation-extended-shortcodes/featured-image.jpg"
        data-srcset="/posts/theme-documentation-extended-shortcodes/featured-image.jpg, /posts/theme-documentation-extended-shortcodes/featured-image.jpg 1.5x, /posts/theme-documentation-extended-shortcodes/featured-image.jpg 2x"
        data-sizes="auto"
        alt="/posts/theme-documentation-extended-shortcodes/featured-image.jpg"
        title="LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode." /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#1-style">1 style</a></li>
        <li><a href="#2-link">2 link</a></li>
        <li><a href="#image">3 image</a></li>
        <li><a href="#4-admonition">4 admonition</a></li>
        <li><a href="#5-mermaid">5 mermaid</a>
          <ul>
            <li><a href="#flowchart">5.1 流程图</a></li>
            <li><a href="#sequence-diagram">5.2 时序图</a></li>
            <li><a href="#gantt">5.3 甘特图</a></li>
            <li><a href="#class-diagram">5.4 类图</a></li>
            <li><a href="#state-diagram">5.5 状态图</a></li>
            <li><a href="#git-graph">5.6 Git 图</a></li>
            <li><a href="#pie">5.7 饼图</a></li>
          </ul>
        </li>
        <li><a href="#6-echarts">6 echarts</a></li>
        <li><a href="#7-mapbox">7 mapbox</a></li>
        <li><a href="#8-music">8 music</a>
          <ul>
            <li><a href="#custom-music-url">8.1 自定义音乐 URL</a></li>
            <li><a href="#automatic-identification">8.2 音乐平台 URL 的自动识别</a></li>
            <li><a href="#custom-server">8.3 自定义音乐平台, 类型和 ID</a></li>
            <li><a href="#other-parameters">8.4 其它参数</a></li>
          </ul>
        </li>
        <li><a href="#9-bilibili">9 bilibili</a></li>
        <li><a href="#10-typeit">10 typeit</a>
          <ul>
            <li><a href="#simple-content">10.1 简单内容</a></li>
            <li><a href="#code-content">10.2 代码内容</a></li>
            <li><a href="#code-content">10.3 分组内容</a></li>
          </ul>
        </li>
        <li><a href="#11-script">11 script</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><p><strong>LoveIt</strong> 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.</p>
<h2 id="1-style">1 style</h2>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">Hugo <strong>extended</strong> 版本对于 <code>style</code> shortcode 是必需的.</div>
        </div>
    </div>
<p><code>style</code> shortcode 用来在你的文章中插入自定义样式.</p>
<p><code>style</code> shortcode 有两个位置参数.</p>
<p>第一个参数是自定义样式的内容. 它支持 <a href="https://sass-lang.com/documentation/style-rules/declarations#nesting" target="_blank" rel="noopener noreffer">:(fab fa-sass fa-fw): SASS</a> 中的嵌套语法,
并且 <code>&amp;</code> 指代这个父元素.</p>
<p>第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 <code>div</code>.</p>
<p>一个 <code>style</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">style</span> <span class="err">&#34;</span><span class="na">text-align:right</span><span class="err">;</span> <span class="na">strong</span><span class="err">{</span><span class="na">color:</span><span class="err">#</span><span class="na">00b1ff</span><span class="err">;}&#34;</span> <span class="p">&gt;</span><span class="err">}}</span>
<span class="nt">This</span> <span class="nt">is</span> <span class="nt">a</span> <span class="gs">**right-aligned**</span> <span class="nt">paragraph</span><span class="o">.</span>
<span class="p">{</span><span class="err">{</span><span class="p">&lt;</span> <span class="p">/</span><span class="nt">style</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div id="id-1">This is a <strong>right-aligned</strong> paragraph.</div>
<h2 id="2-link">2 link</h2>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a>
<p><code>link</code> shortcode 是 <a href="../basic-markdown-syntax#links" rel="">Markdown 链接语法</a> 的替代.
<code>link</code> shortcode 可以提供一些其它的功能并且可以在代码块中使用.</p>
<p><a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.min.svg"
        data-srcset="/svg/version/0.2.10-new.min.svg, /svg/version/0.2.10-new.min.svg 1.5x, /svg/version/0.2.10-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.10"
        title="LoveIt 新增 | 0.2.10" /></a> 支持<a href="../theme-documentation-content#contents-organization" rel="">本地资源引用</a>的完整用法.</p>
<p><code>link</code> shortcode 有以下命名参数:</p>
<ul>
<li>
<p><strong>href</strong> <em>[必需]</em> (<strong>第一个</strong>位置参数)</p>
<p>链接的目标.</p>
</li>
<li>
<p><strong>content</strong> <em>[可选]</em> (<strong>第二个</strong>位置参数)</p>
<p>链接的内容, 默认值是 <strong>href</strong> 参数的值.</p>
<p><em>支持 Markdown 或者 HTML 格式.</em></p>
</li>
<li>
<p><strong>title</strong> <em>[可选]</em> (<strong>第三个</strong>位置参数)</p>
<p>HTML <code>a</code> 标签 的 <code>title</code> 属性, 当悬停在链接上会显示的提示.</p>
</li>
<li>
<p><strong>rel</strong> <em>[可选]</em></p>
<p>HTML <code>a</code> 标签 的 <code>rel</code> 补充属性.</p>
</li>
<li>
<p><strong>class</strong> <em>[可选]</em></p>
<p>HTML <code>a</code> 标签 的 <code>class</code> 属性.</p>
</li>
</ul>
<p>一个 <code>link</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">assemble</span><span class="err">.</span><span class="na">io</span><span class="err">&#34;</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://assemble.io&#34;</span> <span class="p">&gt;</span>}}

{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">mailto:contact</span><span class="err">@</span><span class="na">revolunet</span><span class="err">.</span><span class="na">com</span><span class="err">&#34;</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;mailto:contact@revolunet.com&#34;</span> <span class="p">&gt;</span>}}

{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">assemble</span><span class="err">.</span><span class="na">io</span><span class="err">&#34;</span> <span class="na">Assemble</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://assemble.io&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">Assemble</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<ul>
<li><a href="https://assemble.io" target="_blank" rel="noopener noreffer">https://assemble.io</a></li>
<li><a href="mailto:contact@revolunet.com" rel="">mailto:contact@revolunet.com</a></li>
<li><a href="https://assemble.io" target="_blank" rel="noopener noreffer">Assemble</a></li>
</ul>
<p>一个带有标题的 <code>link</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">github</span><span class="err">.</span><span class="na">com</span><span class="err">/</span><span class="na">upstage</span><span class="err">/&#34;</span> <span class="na">Upstage</span> <span class="err">&#34;</span><span class="na">Visit</span> <span class="na">Upstage</span><span class="err">!&#34;</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://github.com/upstage/&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">Upstage</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;Visit Upstage!&#34;</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下 (将鼠标悬停在链接上，会有一行提示):</p>
<a href="https://github.com/upstage/" title="Visit Upstage!" target="_blank" rel="noopener noreffer">Upstage</a>
<h2 id="image">3 image</h2>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a>
<p><code>image</code> shortcode 是 <a href="../theme-documentation-built-in-shortcodes#figure" rel=""><code>figure</code> shortcode</a> 的替代. <code>image</code> shortcode 可以充分利用 <a href="https://github.com/aFarkas/lazysizes" target="_blank" rel="noopener noreffer">lazysizes</a> 和 <a href="https://github.com/sachinchoolur/lightgallery.js" target="_blank" rel="noopener noreffer">lightgallery.js</a> 两个依赖库.</p>
<p><a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.min.svg"
        data-srcset="/svg/version/0.2.10-new.min.svg, /svg/version/0.2.10-new.min.svg 1.5x, /svg/version/0.2.10-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.10"
        title="LoveIt 新增 | 0.2.10" /></a> 支持<a href="../theme-documentation-content#contents-organization" rel="">本地资源引用</a>的完整用法.</p>
<p><code>image</code> shortcode 有以下命名参数:</p>
<ul>
<li>
<p><strong>src</strong> <em>[必需]</em> (<strong>第一个</strong>位置参数)</p>
<p>图片的 URL.</p>
</li>
<li>
<p><strong>alt</strong> <em>[可选]</em> (<strong>第二个</strong>位置参数)</p>
<p>图片无法显示时的替代文本, 默认值是 <strong>src</strong> 参数的值.</p>
<p><em>支持 Markdown 或者 HTML 格式.</em></p>
</li>
<li>
<p><strong>caption</strong> <em>[可选]</em> (<strong>第三个</strong>位置参数)</p>
<p>图片标题.</p>
<p><em>支持 Markdown 或者 HTML 格式.</em></p>
</li>
<li>
<p><strong>title</strong> <em>[可选]</em></p>
<p>当悬停在图片上会显示的提示.</p>
</li>
<li>
<p><strong>class</strong> <em>[可选]</em></p>
<p>HTML <code>figure</code> 标签的 <code>class</code> 属性.</p>
</li>
<li>
<p><strong>src_s</strong> <em>[可选]</em></p>
<p>图片缩略图的 URL, 用在画廊模式中, 默认值是 <strong>src</strong> 参数的值.</p>
</li>
<li>
<p><strong>src_l</strong> <em>[可选]</em></p>
<p>高清图片的 URL, 用在画廊模式中, 默认值是 <strong>src</strong> 参数的值.</p>
</li>
<li>
<p><strong>height</strong> <em>[可选]</em></p>
<p>图片的 <code>height</code> 属性.</p>
</li>
<li>
<p><strong>width</strong> <em>[可选]</em></p>
<p>图片的 <code>width</code> 属性.</p>
</li>
<li>
<p><strong>linked</strong> <em>[可选]</em></p>
<p>图片是否需要被链接, 默认值是 <code>true</code>.</p>
</li>
<li>
<p><strong>rel</strong> <em>[可选]</em></p>
<p>HTML <code>a</code> 标签 的 <code>rel</code> 补充属性, 仅在 <strong>linked</strong> 属性设置成 <code>true</code> 时有效.</p>
</li>
</ul>
<p>一个 <code>image</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">image</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/images/lighthouse.jpg&#34;</span> <span class="na">caption</span><span class="o">=</span><span class="s">&#34;Lighthouse (`image`)&#34;</span> <span class="na">src_s</span><span class="o">=</span><span class="s">&#34;/images/lighthouse-small.jpg&#34;</span> <span class="na">src_l</span><span class="o">=</span><span class="s">&#34;/images/lighthouse-large.jpg&#34;</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<figure><a class="lightgallery" href="/images/lighthouse-large.jpg" title="/images/lighthouse.jpg" data-thumbnail="/images/lighthouse-small.jpg" data-sub-html="<h2>Lighthouse (image)</h2>">
        <img
            class="lazyload"
            src="/svg/loading.min.svg"
            data-src="/images/lighthouse.jpg"
            data-srcset="/images/lighthouse-small.jpg, /images/lighthouse.jpg 1.5x, /images/lighthouse-large.jpg 2x"
            data-sizes="auto"
            alt="/images/lighthouse.jpg" />
    </a><figcaption class="image-caption">Lighthouse (<code>image</code>)</figcaption>
    </figure>
<h2 id="4-admonition">4 admonition</h2>
<p><code>admonition</code> shortcode 支持 <strong>12</strong> 种 帮助你在页面中插入提示的横幅.</p>
<p><em>支持 Markdown 或者 HTML 格式.</em></p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>注意</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition abstract open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-list-ul fa-fw"></i>摘要<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>摘要</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition info open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-info-circle fa-fw"></i>信息<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>信息</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>技巧<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>技巧</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition success open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-check-circle fa-fw"></i>成功<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>成功</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition question open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-question-circle fa-fw"></i>问题<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>问题</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition warning open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-exclamation-triangle fa-fw"></i>警告<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>警告</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition failure open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-times-circle fa-fw"></i>失败<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>失败</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition danger open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-skull-crossbones fa-fw"></i>危险<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>危险</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition bug open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-bug fa-fw"></i>Bug<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>Bug</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition example open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-list-ol fa-fw"></i>示例<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>示例</strong> 横幅</div>
        </div>
    </div>
<div class="details admonition quote open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-quote-right fa-fw"></i>引用<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>引用</strong> 横幅</div>
        </div>
    </div>
<p><code>admonition</code> shortcode 有以下命名参数:</p>
<ul>
<li>
<p><strong>type</strong> <em>[必需]</em> (<strong>第一个</strong>位置参数)</p>
<p><code>admonition</code> 横幅的类型, 默认值是 <code>note</code>.</p>
</li>
<li>
<p><strong>title</strong> <em>[可选]</em> (<strong>第二个</strong>位置参数)</p>
<p><code>admonition</code> 横幅的标题, 默认值是 <strong>type</strong> 参数的值.</p>
</li>
<li>
<p><strong>open</strong> <em>[可选]</em> (<strong>第三个</strong>位置参数) <a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a></p>
<p>横幅内容是否默认展开, 默认值是 <code>true</code>.</p>
</li>
</ul>
<p>一个 <code>admonition</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">admonition</span> <span class="na">type</span><span class="o">=</span><span class="s">tip</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;This is a tip&#34;</span> <span class="na">open</span><span class="o">=</span><span class="s">false</span> <span class="p">&gt;</span>}}
一个 <span class="gs">**技巧**</span> 横幅
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">admonition</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">admonition</span> <span class="na">tip</span> <span class="err">&#34;</span><span class="na">This</span> <span class="na">is</span> <span class="na">a</span> <span class="na">tip</span><span class="err">&#34;</span> <span class="na">false</span> <span class="p">&gt;</span>}}
一个 <span class="gs">**技巧**</span> 横幅
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">admonition</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="details admonition tip">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>This is a tip<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">一个 <strong>技巧</strong> 横幅</div>
        </div>
    </div>
<h2 id="5-mermaid">5 mermaid</h2>
<p><a href="https://mermaidjs.github.io/" target="_blank" rel="noopener noreffer">mermaid</a> 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法.</p>
<p>只需将你的 mermaid 代码插入 <code>mermaid</code> shortcode 中即可.</p>
<h3 id="flowchart">5.1 流程图</h3>
<p>一个 <strong>流程图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
graph LR;
    A[Hard edge] --&gt;|Link text| B(Round edge)
    B --&gt; C{Decision}
    C --&gt;|One| D[Result one]
    C --&gt;|Two| E[Result two]
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-2"></div>
<h3 id="sequence-diagram">5.2 时序图</h3>
<p>一个 <strong>时序图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice-&gt;&gt;John: Hello John, how are you?
    loop Healthcheck
        John-&gt;John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <span class="p">&lt;</span><span class="nt">br</span><span class="p">/&gt;</span>prevail...
    John--&gt;Alice: Great!
    John-&gt;Bob: How about you?
    Bob--&gt;John: Jolly good!
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-3"></div>
<h3 id="gantt">5.3 甘特图</h3>
<p>一个 <strong>甘特图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-4"></div>
<h3 id="class-diagram">5.4 类图</h3>
<p>一个 <strong>类图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
classDiagram
    Class01 <span class="err">&lt;</span>|-- AveryLongClass : Cool
    Class03 <span class="ge">*-- Class04
</span><span class="ge">    Class05 o-- Class06
</span><span class="ge">    Class07 .. Class08
</span><span class="ge">    Class09 --&gt; C2 : Where am i?
</span><span class="ge">    Class09 --*</span> C3
    Class09 --|&gt; Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <span class="p">&lt;</span><span class="nt">--</span><span class="p">&gt;</span> C2: Cool label
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-5"></div>
<h3 id="state-diagram">5.5 状态图</h3>
<p>一个 <strong>状态图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
stateDiagram
    [*] --&gt; Still
    Still --&gt; [*]
    Still --&gt; Moving
    Moving --&gt; Still
    Moving --&gt; Crash
    Crash --&gt; [*]
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-6"></div>
<h3 id="git-graph">5.6 Git 图</h3>
<p>一个 <strong>Git 图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
gitGraph:
options
{
    &#34;nodeSpacing&#34;: 100,
    &#34;nodeRadius&#34;: 10
}
end
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-7"></div>
<h3 id="pie">5.7 饼图</h3>
<p>一个 <strong>饼图</strong> <code>mermaid</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mermaid</span> <span class="p">&gt;</span>}}
pie
    &#34;Dogs&#34; : 386
    &#34;Cats&#34; : 85
    &#34;Rats&#34; : 15
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">mermaid</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mermaid" id="id-8"></div>
<h2 id="6-echarts">6 echarts</h2>
<p><a href="https://echarts.apache.org/" target="_blank" rel="noopener noreffer">ECharts</a> 是一个帮助你生成交互式数据可视化的库.</p>
<p>ECharts 提供了常规的 <a href="https://echarts.apache.org/zh/option.html#series-line" target="_blank" rel="noopener noreffer">折线图</a>, <a href="https://echarts.apache.org/zh/option.html#series-line" target="_blank" rel="noopener noreffer">柱状图</a>, <a href="https://echarts.apache.org/zh/option.html#series-scatter" target="_blank" rel="noopener noreffer">散点图</a>, <a href="https://echarts.apache.org/zh/option.html#series-pie" target="_blank" rel="noopener noreffer">饼图</a>, <a href="https://echarts.apache.org/zh/option.html#series-candlestick" target="_blank" rel="noopener noreffer">K线图</a>, 用于统计的 <a href="https://echarts.apache.org/zh/option.html#series-boxplot" target="_blank" rel="noopener noreffer">盒形图</a>, 用于地理数据可视化的 <a href="https://echarts.apache.org/zh/option.html#series-map" target="_blank" rel="noopener noreffer">地图</a>, <a href="https://echarts.apache.org/zh/option.html#series-heatmap" target="_blank" rel="noopener noreffer">热力图</a>, <a href="https://echarts.apache.org/zh/option.html#series-lines" target="_blank" rel="noopener noreffer">线图</a>, 用于关系数据可视化的 <a href="https://echarts.apache.org/zh/option.html#series-graph" target="_blank" rel="noopener noreffer">关系图</a>, <a href="https://echarts.apache.org/zh/option.html#series-treemap" target="_blank" rel="noopener noreffer">treemap</a>, <a href="https://echarts.apache.org/zh/option.html#series-sunburst" target="_blank" rel="noopener noreffer">旭日图</a>, 多维数据可视化的 <a href="https://echarts.apache.org/zh/option.html#series-parallel" target="_blank" rel="noopener noreffer">平行坐标</a>, 还有用于 BI 的 <a href="https://echarts.apache.org/zh/option.html#series-funnel" target="_blank" rel="noopener noreffer">漏斗图</a>, <a href="https://echarts.apache.org/zh/option.html#series-gauge" target="_blank" rel="noopener noreffer">仪表盘</a>, 并且支持图与图之间的混搭.</p>
<p>只需在 <code>echarts</code> shortcode 中以 <code>JSON</code>/<code>YAML</code>/<code>TOML</code>格式插入 ECharts 选项即可.</p>
<p>一个 <code>JSON</code> 格式的 <code>echarts</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span><span class="lnt">70
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-json" data-lang="json"><span class="p">{</span><span class="err">{&lt;</span> <span class="err">echarts</span> <span class="err">&gt;</span><span class="p">}</span><span class="err">}</span>
<span class="p">{</span>
  <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;text&#34;</span><span class="p">:</span> <span class="s2">&#34;折线统计图&#34;</span><span class="p">,</span>
    <span class="nt">&#34;top&#34;</span><span class="p">:</span> <span class="s2">&#34;2%&#34;</span><span class="p">,</span>
    <span class="nt">&#34;left&#34;</span><span class="p">:</span> <span class="s2">&#34;center&#34;</span>
  <span class="p">},</span>
  <span class="nt">&#34;tooltip&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;trigger&#34;</span><span class="p">:</span> <span class="s2">&#34;axis&#34;</span>
  <span class="p">},</span>
  <span class="nt">&#34;legend&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;邮件营销&#34;</span><span class="p">,</span> <span class="s2">&#34;联盟广告&#34;</span><span class="p">,</span> <span class="s2">&#34;视频广告&#34;</span><span class="p">,</span> <span class="s2">&#34;直接访问&#34;</span><span class="p">,</span> <span class="s2">&#34;搜索引擎&#34;</span><span class="p">],</span>
    <span class="nt">&#34;top&#34;</span><span class="p">:</span> <span class="s2">&#34;10%&#34;</span>
  <span class="p">},</span>
  <span class="nt">&#34;grid&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;left&#34;</span><span class="p">:</span> <span class="s2">&#34;5%&#34;</span><span class="p">,</span>
    <span class="nt">&#34;right&#34;</span><span class="p">:</span> <span class="s2">&#34;5%&#34;</span><span class="p">,</span>
    <span class="nt">&#34;bottom&#34;</span><span class="p">:</span> <span class="s2">&#34;5%&#34;</span><span class="p">,</span>
    <span class="nt">&#34;top&#34;</span><span class="p">:</span> <span class="s2">&#34;20%&#34;</span><span class="p">,</span>
    <span class="nt">&#34;containLabel&#34;</span><span class="p">:</span> <span class="kc">true</span>
  <span class="p">},</span>
  <span class="nt">&#34;toolbox&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;feature&#34;</span><span class="p">:</span> <span class="p">{</span>
      <span class="nt">&#34;saveAsImage&#34;</span><span class="p">:</span> <span class="p">{</span>
        <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;保存为图片&#34;</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">},</span>
  <span class="nt">&#34;xAxis&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;category&#34;</span><span class="p">,</span>
    <span class="nt">&#34;boundaryGap&#34;</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;周一&#34;</span><span class="p">,</span> <span class="s2">&#34;周二&#34;</span><span class="p">,</span> <span class="s2">&#34;周三&#34;</span><span class="p">,</span> <span class="s2">&#34;周四&#34;</span><span class="p">,</span> <span class="s2">&#34;周五&#34;</span><span class="p">,</span> <span class="s2">&#34;周六&#34;</span><span class="p">,</span> <span class="s2">&#34;周日&#34;</span><span class="p">]</span>
  <span class="p">},</span>
  <span class="nt">&#34;yAxis&#34;</span><span class="p">:</span> <span class="p">{</span>
    <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;value&#34;</span>
  <span class="p">},</span>
  <span class="nt">&#34;series&#34;</span><span class="p">:</span> <span class="p">[</span>
    <span class="p">{</span>
      <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;邮件营销&#34;</span><span class="p">,</span>
      <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;line&#34;</span><span class="p">,</span>
      <span class="nt">&#34;stack&#34;</span><span class="p">:</span> <span class="s2">&#34;总量&#34;</span><span class="p">,</span>
      <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">120</span><span class="p">,</span> <span class="mi">132</span><span class="p">,</span> <span class="mi">101</span><span class="p">,</span> <span class="mi">134</span><span class="p">,</span> <span class="mi">90</span><span class="p">,</span> <span class="mi">230</span><span class="p">,</span> <span class="mi">210</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="p">{</span>
      <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;联盟广告&#34;</span><span class="p">,</span>
      <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;line&#34;</span><span class="p">,</span>
      <span class="nt">&#34;stack&#34;</span><span class="p">:</span> <span class="s2">&#34;总量&#34;</span><span class="p">,</span>
      <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">220</span><span class="p">,</span> <span class="mi">182</span><span class="p">,</span> <span class="mi">191</span><span class="p">,</span> <span class="mi">234</span><span class="p">,</span> <span class="mi">290</span><span class="p">,</span> <span class="mi">330</span><span class="p">,</span> <span class="mi">310</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="p">{</span>
      <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;视频广告&#34;</span><span class="p">,</span>
      <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;line&#34;</span><span class="p">,</span>
      <span class="nt">&#34;stack&#34;</span><span class="p">:</span> <span class="s2">&#34;总量&#34;</span><span class="p">,</span>
      <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">150</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">201</span><span class="p">,</span> <span class="mi">154</span><span class="p">,</span> <span class="mi">190</span><span class="p">,</span> <span class="mi">330</span><span class="p">,</span> <span class="mi">410</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="p">{</span>
      <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;直接访问&#34;</span><span class="p">,</span>
      <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;line&#34;</span><span class="p">,</span>
      <span class="nt">&#34;stack&#34;</span><span class="p">:</span> <span class="s2">&#34;总量&#34;</span><span class="p">,</span>
      <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">320</span><span class="p">,</span> <span class="mi">332</span><span class="p">,</span> <span class="mi">301</span><span class="p">,</span> <span class="mi">334</span><span class="p">,</span> <span class="mi">390</span><span class="p">,</span> <span class="mi">330</span><span class="p">,</span> <span class="mi">320</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="p">{</span>
      <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;搜索引擎&#34;</span><span class="p">,</span>
      <span class="nt">&#34;type&#34;</span><span class="p">:</span> <span class="s2">&#34;line&#34;</span><span class="p">,</span>
      <span class="nt">&#34;stack&#34;</span><span class="p">:</span> <span class="s2">&#34;总量&#34;</span><span class="p">,</span>
      <span class="nt">&#34;data&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">820</span><span class="p">,</span> <span class="mi">932</span><span class="p">,</span> <span class="mi">901</span><span class="p">,</span> <span class="mi">934</span><span class="p">,</span> <span class="mi">1290</span><span class="p">,</span> <span class="mi">1330</span><span class="p">,</span> <span class="mi">1320</span><span class="p">]</span>
    <span class="p">}</span>
  <span class="p">]</span>
<span class="p">}</span>
<span class="p">{</span><span class="err">{&lt;</span> <span class="err">/echarts</span> <span class="err">&gt;</span><span class="p">}</span><span class="err">}</span>
</code></pre></td></tr></table>
</div>
</div><p>一个 <code>YAML</code> 格式的 <code>echarts</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span><span class="lnt">70
</span><span class="lnt">71
</span><span class="lnt">72
</span><span class="lnt">73
</span><span class="lnt">74
</span><span class="lnt">75
</span><span class="lnt">76
</span><span class="lnt">77
</span><span class="lnt">78
</span><span class="lnt">79
</span><span class="lnt">80
</span><span class="lnt">81
</span><span class="lnt">82
</span><span class="lnt">83
</span><span class="lnt">84
</span><span class="lnt">85
</span><span class="lnt">86
</span><span class="lnt">87
</span><span class="lnt">88
</span><span class="lnt">89
</span><span class="lnt">90
</span><span class="lnt">91
</span><span class="lnt">92
</span><span class="lnt">93
</span><span class="lnt">94
</span><span class="lnt">95
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml">{{<span class="l">&lt; echarts &gt;}}</span><span class="w">
</span><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">text</span><span class="p">:</span><span class="w"> </span><span class="l">折线统计图</span><span class="w">
</span><span class="w">    </span><span class="nt">top</span><span class="p">:</span><span class="w"> </span><span class="m">2</span><span class="l">%</span><span class="w">
</span><span class="w">    </span><span class="nt">left</span><span class="p">:</span><span class="w"> </span><span class="l">center</span><span class="w">
</span><span class="w"></span><span class="nt">tooltip</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">trigger</span><span class="p">:</span><span class="w"> </span><span class="l">axis</span><span class="w">
</span><span class="w"></span><span class="nt">legend</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">        </span>- <span class="l">邮件营销</span><span class="w">
</span><span class="w">        </span>- <span class="l">联盟广告</span><span class="w">
</span><span class="w">        </span>- <span class="l">视频广告</span><span class="w">
</span><span class="w">        </span>- <span class="l">直接访问</span><span class="w">
</span><span class="w">        </span>- <span class="l">搜索引擎</span><span class="w">
</span><span class="w">    </span><span class="nt">top</span><span class="p">:</span><span class="w"> </span><span class="m">10</span><span class="l">%</span><span class="w">
</span><span class="w"></span><span class="nt">grid</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">left</span><span class="p">:</span><span class="w"> </span><span class="m">5</span><span class="l">%</span><span class="w">
</span><span class="w">    </span><span class="nt">right</span><span class="p">:</span><span class="w"> </span><span class="m">5</span><span class="l">%</span><span class="w">
</span><span class="w">    </span><span class="nt">bottom</span><span class="p">:</span><span class="w"> </span><span class="m">5</span><span class="l">%</span><span class="w">
</span><span class="w">    </span><span class="nt">top</span><span class="p">:</span><span class="w"> </span><span class="m">20</span><span class="l">%</span><span class="w">
</span><span class="w">    </span><span class="nt">containLabel</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">toolbox</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">feature</span><span class="p">:</span><span class="w">
</span><span class="w">        </span><span class="nt">saveAsImage</span><span class="p">:</span><span class="w">
</span><span class="w">            </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">保存为图片</span><span class="w">
</span><span class="w"></span><span class="nt">xAxis</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">category</span><span class="w">
</span><span class="w">    </span><span class="nt">boundaryGap</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w">    </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">        </span>- <span class="l">周一</span><span class="w">
</span><span class="w">        </span>- <span class="l">周二</span><span class="w">
</span><span class="w">        </span>- <span class="l">周三</span><span class="w">
</span><span class="w">        </span>- <span class="l">周四</span><span class="w">
</span><span class="w">        </span>- <span class="l">周五</span><span class="w">
</span><span class="w">        </span>- <span class="l">周六</span><span class="w">
</span><span class="w">        </span>- <span class="l">周日</span><span class="w">
</span><span class="w"></span><span class="nt">yAxis</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">value</span><span class="w">
</span><span class="w"></span><span class="nt">series</span><span class="p">:</span><span class="w">
</span><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">邮件营销</span><span class="w">
</span><span class="w">      </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">line</span><span class="w">
</span><span class="w">      </span><span class="nt">stack</span><span class="p">:</span><span class="w"> </span><span class="l">总量</span><span class="w">
</span><span class="w">      </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">          </span>- <span class="m">120</span><span class="w">
</span><span class="w">          </span>- <span class="m">132</span><span class="w">
</span><span class="w">          </span>- <span class="m">101</span><span class="w">
</span><span class="w">          </span>- <span class="m">134</span><span class="w">
</span><span class="w">          </span>- <span class="m">90</span><span class="w">
</span><span class="w">          </span>- <span class="m">230</span><span class="w">
</span><span class="w">          </span>- <span class="m">210</span><span class="w">
</span><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">联盟广告</span><span class="w">
</span><span class="w">      </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">line</span><span class="w">
</span><span class="w">      </span><span class="nt">stack</span><span class="p">:</span><span class="w"> </span><span class="l">总量</span><span class="w">
</span><span class="w">      </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">          </span>- <span class="m">220</span><span class="w">
</span><span class="w">          </span>- <span class="m">182</span><span class="w">
</span><span class="w">          </span>- <span class="m">191</span><span class="w">
</span><span class="w">          </span>- <span class="m">234</span><span class="w">
</span><span class="w">          </span>- <span class="m">290</span><span class="w">
</span><span class="w">          </span>- <span class="m">330</span><span class="w">
</span><span class="w">          </span>- <span class="m">310</span><span class="w">
</span><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">视频广告</span><span class="w">
</span><span class="w">      </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">line</span><span class="w">
</span><span class="w">      </span><span class="nt">stack</span><span class="p">:</span><span class="w"> </span><span class="l">总量</span><span class="w">
</span><span class="w">      </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">          </span>- <span class="m">150</span><span class="w">
</span><span class="w">          </span>- <span class="m">232</span><span class="w">
</span><span class="w">          </span>- <span class="m">201</span><span class="w">
</span><span class="w">          </span>- <span class="m">154</span><span class="w">
</span><span class="w">          </span>- <span class="m">190</span><span class="w">
</span><span class="w">          </span>- <span class="m">330</span><span class="w">
</span><span class="w">          </span>- <span class="m">410</span><span class="w">
</span><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">直接访问</span><span class="w">
</span><span class="w">      </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">line</span><span class="w">
</span><span class="w">      </span><span class="nt">stack</span><span class="p">:</span><span class="w"> </span><span class="l">总量</span><span class="w">
</span><span class="w">      </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">          </span>- <span class="m">320</span><span class="w">
</span><span class="w">          </span>- <span class="m">332</span><span class="w">
</span><span class="w">          </span>- <span class="m">301</span><span class="w">
</span><span class="w">          </span>- <span class="m">334</span><span class="w">
</span><span class="w">          </span>- <span class="m">390</span><span class="w">
</span><span class="w">          </span>- <span class="m">330</span><span class="w">
</span><span class="w">          </span>- <span class="m">320</span><span class="w">
</span><span class="w">    </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">搜索引擎</span><span class="w">
</span><span class="w">      </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">line</span><span class="w">
</span><span class="w">      </span><span class="nt">stack</span><span class="p">:</span><span class="w"> </span><span class="l">总量</span><span class="w">
</span><span class="w">      </span><span class="nt">data</span><span class="p">:</span><span class="w">
</span><span class="w">          </span>- <span class="m">820</span><span class="w">
</span><span class="w">          </span>- <span class="m">932</span><span class="w">
</span><span class="w">          </span>- <span class="m">901</span><span class="w">
</span><span class="w">          </span>- <span class="m">934</span><span class="w">
</span><span class="w">          </span>- <span class="m">1290</span><span class="w">
</span><span class="w">          </span>- <span class="m">1330</span><span class="w">
</span><span class="w">          </span>- <span class="m">1320</span><span class="w">
</span><span class="w"></span>{{<span class="l">&lt; /echarts &gt;}}</span><span class="w">
</span></code></pre></td></tr></table>
</div>
</div><p>一个 <code>TOML</code> 格式的 <code>echarts</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-toml" data-lang="toml"><span class="p">{{</span><span class="err">&lt;</span> <span class="nx">echarts</span> <span class="err">&gt;</span><span class="p">}}</span>
<span class="p">[</span><span class="nx">title</span><span class="p">]</span>
<span class="nx">text</span> <span class="p">=</span> <span class="s2">&#34;折线统计图&#34;</span>
<span class="nx">top</span> <span class="p">=</span> <span class="s2">&#34;2%&#34;</span>
<span class="nx">left</span> <span class="p">=</span> <span class="s2">&#34;center&#34;</span>

<span class="p">[</span><span class="nx">tooltip</span><span class="p">]</span>
<span class="nx">trigger</span> <span class="p">=</span> <span class="s2">&#34;axis&#34;</span>

<span class="p">[</span><span class="nx">legend</span><span class="p">]</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="s2">&#34;邮件营销&#34;</span><span class="p">,</span>
  <span class="s2">&#34;联盟广告&#34;</span><span class="p">,</span>
  <span class="s2">&#34;视频广告&#34;</span><span class="p">,</span>
  <span class="s2">&#34;直接访问&#34;</span><span class="p">,</span>
  <span class="s2">&#34;搜索引擎&#34;</span>
<span class="p">]</span>
<span class="nx">top</span> <span class="p">=</span> <span class="s2">&#34;10%&#34;</span>

<span class="p">[</span><span class="nx">grid</span><span class="p">]</span>
<span class="nx">left</span> <span class="p">=</span> <span class="s2">&#34;5%&#34;</span>
<span class="nx">right</span> <span class="p">=</span> <span class="s2">&#34;5%&#34;</span>
<span class="nx">bottom</span> <span class="p">=</span> <span class="s2">&#34;5%&#34;</span>
<span class="nx">top</span> <span class="p">=</span> <span class="s2">&#34;20%&#34;</span>
<span class="nx">containLabel</span> <span class="p">=</span> <span class="kc">true</span>

<span class="p">[</span><span class="nx">toolbox</span><span class="p">]</span>
<span class="p">[</span><span class="nx">toolbox</span><span class="p">.</span><span class="nx">feature</span><span class="p">]</span>
<span class="p">[</span><span class="nx">toolbox</span><span class="p">.</span><span class="nx">feature</span><span class="p">.</span><span class="nx">saveAsImage</span><span class="p">]</span>
<span class="nx">title</span> <span class="p">=</span> <span class="s2">&#34;保存为图片&#34;</span>

<span class="p">[</span><span class="nx">xAxis</span><span class="p">]</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;category&#34;</span>
<span class="nx">boundaryGap</span> <span class="p">=</span> <span class="kc">false</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="s2">&#34;周一&#34;</span><span class="p">,</span>
  <span class="s2">&#34;周二&#34;</span><span class="p">,</span>
  <span class="s2">&#34;周三&#34;</span><span class="p">,</span>
  <span class="s2">&#34;周四&#34;</span><span class="p">,</span>
  <span class="s2">&#34;周五&#34;</span><span class="p">,</span>
  <span class="s2">&#34;周六&#34;</span><span class="p">,</span>
  <span class="s2">&#34;周日&#34;</span>
<span class="p">]</span>

<span class="p">[</span><span class="nx">yAxis</span><span class="p">]</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;value&#34;</span>

<span class="p">[[</span><span class="nx">series</span><span class="p">]]</span>
<span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;邮件营销&#34;</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;line&#34;</span>
<span class="nx">stack</span> <span class="p">=</span> <span class="s2">&#34;总量&#34;</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="mf">120.0</span><span class="p">,</span>
  <span class="mf">132.0</span><span class="p">,</span>
  <span class="mf">101.0</span><span class="p">,</span>
  <span class="mf">134.0</span><span class="p">,</span>
  <span class="mf">90.0</span><span class="p">,</span>
  <span class="mf">230.0</span><span class="p">,</span>
  <span class="mf">210.0</span>
<span class="p">]</span>

<span class="p">[[</span><span class="nx">series</span><span class="p">]]</span>
<span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;联盟广告&#34;</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;line&#34;</span>
<span class="nx">stack</span> <span class="p">=</span> <span class="s2">&#34;总量&#34;</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="mf">220.0</span><span class="p">,</span>
  <span class="mf">182.0</span><span class="p">,</span>
  <span class="mf">191.0</span><span class="p">,</span>
  <span class="mf">234.0</span><span class="p">,</span>
  <span class="mf">290.0</span><span class="p">,</span>
  <span class="mf">330.0</span><span class="p">,</span>
  <span class="mf">310.0</span>
<span class="p">]</span>

<span class="p">[[</span><span class="nx">series</span><span class="p">]]</span>
<span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;视频广告&#34;</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;line&#34;</span>
<span class="nx">stack</span> <span class="p">=</span> <span class="s2">&#34;总量&#34;</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="mf">150.0</span><span class="p">,</span>
  <span class="mf">232.0</span><span class="p">,</span>
  <span class="mf">201.0</span><span class="p">,</span>
  <span class="mf">154.0</span><span class="p">,</span>
  <span class="mf">190.0</span><span class="p">,</span>
  <span class="mf">330.0</span><span class="p">,</span>
  <span class="mf">410.0</span>
<span class="p">]</span>

<span class="p">[[</span><span class="nx">series</span><span class="p">]]</span>
<span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;直接访问&#34;</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;line&#34;</span>
<span class="nx">stack</span> <span class="p">=</span> <span class="s2">&#34;总量&#34;</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="mf">320.0</span><span class="p">,</span>
  <span class="mf">332.0</span><span class="p">,</span>
  <span class="mf">301.0</span><span class="p">,</span>
  <span class="mf">334.0</span><span class="p">,</span>
  <span class="mf">390.0</span><span class="p">,</span>
  <span class="mf">330.0</span><span class="p">,</span>
  <span class="mf">320.0</span>
<span class="p">]</span>

<span class="p">[[</span><span class="nx">series</span><span class="p">]]</span>
<span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;搜索引擎&#34;</span>
<span class="nx">type</span> <span class="p">=</span> <span class="s2">&#34;line&#34;</span>
<span class="nx">stack</span> <span class="p">=</span> <span class="s2">&#34;总量&#34;</span>
<span class="nx">data</span> <span class="p">=</span> <span class="p">[</span>
  <span class="mf">820.0</span><span class="p">,</span>
  <span class="mf">932.0</span><span class="p">,</span>
  <span class="mf">901.0</span><span class="p">,</span>
  <span class="mf">934.0</span><span class="p">,</span>
  <span class="mf">1290.0</span><span class="p">,</span>
  <span class="mf">1330.0</span><span class="p">,</span>
  <span class="mf">1320.0</span>
<span class="p">]</span>
<span class="p">{{</span><span class="err">&lt;</span> <span class="err">/</span><span class="nx">echarts</span> <span class="err">&gt;</span><span class="p">}}</span>
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="echarts" id="id-9" style="width: 100%; height: 30rem;"></div>
<p><code>echarts</code> shortcode 还有以下命名参数:</p>
<ul>
<li>
<p><strong>width</strong> <em>[可选]</em> (<strong>第一个</strong>位置参数)</p>
<p><a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 数据可视化的宽度, 默认值是 <code>100%</code>.</p>
</li>
<li>
<p><strong>height</strong> <em>[可选]</em> (<strong>第二个</strong>位置参数)</p>
<p><a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a> 数据可视化的高度, 默认值是 <code>30rem</code>.</p>
</li>
</ul>
<h2 id="7-mapbox">7 mapbox</h2>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.min.svg"
        data-srcset="/svg/version/0.2.0-new.min.svg, /svg/version/0.2.0-new.min.svg 1.5x, /svg/version/0.2.0-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.0"
        title="LoveIt 新增 | 0.2.0" /></a>
<p><a href="https://docs.mapbox.com/mapbox-gl-js" target="_blank" rel="noopener noreffer">Mapbox GL JS</a> 是一个 JavaScript 库，它使用 WebGL, 以 <a href="https://docs.mapbox.com/help/glossary/vector-tiles/" target="_blank" rel="noopener noreffer">vector tiles</a> 和 <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/" target="_blank" rel="noopener noreffer">Mapbox styles</a> 为来源, 将它们渲染成互动式地图.</p>
<p><code>mapbox</code> shortcode 有以下命名参数来使用 Mapbox GL JS:</p>
<ul>
<li>
<p><strong>lng</strong> <em>[必需]</em> (<strong>第一个</strong>位置参数)</p>
<p>地图初始中心点的经度, 以度为单位.</p>
</li>
<li>
<p><strong>lat</strong> <em>[必需]</em> (<strong>第二个</strong>位置参数)</p>
<p>地图初始中心点的纬度, 以度为单位.</p>
</li>
<li>
<p><strong>zoom</strong> <em>[可选]</em> (<strong>第三个</strong>位置参数)</p>
<p>地图的初始缩放级别, 默认值是 <code>10</code>.</p>
</li>
<li>
<p><strong>marked</strong> <em>[可选]</em> (<strong>第四个</strong>位置参数)</p>
<p>是否在地图的初始中心点添加图钉, 默认值是 <code>true</code>.</p>
</li>
<li>
<p><strong>light-style</strong> <em>[可选]</em> (<strong>第五个</strong>位置参数)</p>
<p>浅色主题的地图样式, 默认值是<a href="../theme-documentation-content#front-matter" rel="">前置参数</a>或者<a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>中设置的值.</p>
</li>
<li>
<p><strong>dark-style</strong> <em>[可选]</em> (<strong>第六个</strong>位置参数)</p>
<p>深色主题的地图样式, 默认值是<a href="../theme-documentation-content#front-matter" rel="">前置参数</a>或者<a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>中设置的值.</p>
</li>
<li>
<p><strong>navigation</strong> <em>[可选]</em></p>
<p>是否添加 <a href="https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" target="_blank" rel="noopener noreffer">NavigationControl</a>, 默认值是<a href="../theme-documentation-content#front-matter" rel="">前置参数</a>或者<a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>中设置的值.</p>
</li>
<li>
<p><strong>geolocate</strong> <em>[可选]</em></p>
<p>是否添加 <a href="https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" target="_blank" rel="noopener noreffer">GeolocateControl</a>, 默认值是<a href="../theme-documentation-content#front-matter" rel="">前置参数</a>或者<a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>中设置的值.</p>
</li>
<li>
<p><strong>scale</strong> <em>[可选]</em></p>
<p>是否添加 <a href="https://docs.mapbox.com/mapbox-gl-js/api#scalecontrol" target="_blank" rel="noopener noreffer">ScaleControl</a>, 默认值是<a href="../theme-documentation-content#front-matter" rel="">前置参数</a>或者<a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>中设置的值.</p>
</li>
<li>
<p><strong>fullscreen</strong> <em>[可选]</em></p>
<p>是否添加 <a href="https://docs.mapbox.com/mapbox-gl-js/api#fullscreencontrol" target="_blank" rel="noopener noreffer">FullscreenControl</a>, 默认值是<a href="../theme-documentation-content#front-matter" rel="">前置参数</a>或者<a href="../theme-documentation-basics#site-configuration" rel="">网站配置</a>中设置的值.</p>
</li>
<li>
<p><strong>width</strong> <em>[可选]</em></p>
<p>地图的宽度, 默认值是 <code>100%</code>.</p>
</li>
<li>
<p><strong>height</strong> <em>[可选]</em></p>
<p>地图的高度, 默认值是 <code>20rem</code>.</p>
</li>
</ul>
<p>一个简单的 <code>mapbox</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mapbox</span> <span class="na">121</span><span class="err">.</span><span class="na">485</span> <span class="na">31</span><span class="err">.</span><span class="na">233</span> <span class="na">12</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">mapbox</span> <span class="na">lng</span><span class="o">=</span><span class="s">121.485</span> <span class="na">lat</span><span class="o">=</span><span class="s">31.233</span> <span class="na">zoom</span><span class="o">=</span><span class="s">12</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mapbox" id="id-10" style="width: 100%; height: 20rem;"></div>
<p>一个带有自定义样式的 <code>mapbox</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">mapbox</span> <span class="na">-122</span><span class="err">.</span><span class="na">252</span> <span class="na">37</span><span class="err">.</span><span class="na">453</span> <span class="na">10</span> <span class="na">false</span> <span class="err">&#34;</span><span class="na">mapbox:</span><span class="err">//</span><span class="na">styles</span><span class="err">/</span><span class="na">mapbox</span><span class="err">/</span><span class="na">streets-zh-v1</span><span class="err">&#34;</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">mapbox</span> <span class="na">lng</span><span class="o">=</span><span class="s">-122.252</span> <span class="na">lat</span><span class="o">=</span><span class="s">37.453</span> <span class="na">zoom</span><span class="o">=</span><span class="s">10</span> <span class="na">marked</span><span class="o">=</span><span class="s">false</span> <span class="na">light-style</span><span class="o">=</span><span class="s">&#34;mapbox://styles/mapbox/streets-zh-v1&#34;</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="mapbox" id="id-11" style="width: 100%; height: 20rem;"></div>
<h2 id="8-music">8 music</h2>
<p><code>music</code> shortcode 基于 <a href="https://github.com/MoePlayer/APlayer" target="_blank" rel="noopener noreffer">APlayer</a> 和 <a href="https://github.com/metowolf/MetingJS" target="_blank" rel="noopener noreffer">MetingJS</a> 提供了一个内嵌的响应式音乐播放器.</p>
<p>有三种方式使用 <code>music</code> shortcode.</p>
<h3 id="custom-music-url">8.1 自定义音乐 URL</h3>
<p><a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.min.svg"
        data-srcset="/svg/version/0.2.10-new.min.svg, /svg/version/0.2.10-new.min.svg 1.5x, /svg/version/0.2.10-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.10"
        title="LoveIt 新增 | 0.2.10" /></a> 支持<a href="../theme-documentation-content#contents-organization" rel="">本地资源引用</a>的完整用法.</p>
<p><code>music</code> shortcode 有以下命名参数来使用自定义音乐 URL:</p>
<ul>
<li>
<p><strong>server</strong> <em>[必需]</em></p>
<p>音乐的链接.</p>
</li>
<li>
<p><strong>type</strong> <em>[可选]</em></p>
<p>音乐的名称.</p>
</li>
<li>
<p><strong>artist</strong> <em>[可选]</em></p>
<p>音乐的创作者.</p>
</li>
<li>
<p><strong>cover</strong> <em>[可选]</em></p>
<p>音乐的封面链接.</p>
</li>
</ul>
<p>一个使用自定义音乐 URL 的 <code>music</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">music</span> <span class="na">url</span><span class="o">=</span><span class="s">&#34;/music/Wavelength.mp3&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">Wavelength</span> <span class="na">artist</span><span class="o">=</span><span class="s">oldmanyoung</span> <span class="na">cover</span><span class="o">=</span><span class="s">&#34;/images/Wavelength.jpg&#34;</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<meting-js url="/music/Wavelength.mp3" name="Wavelength" artist="oldmanyoung" cover="/images/Wavelength.jpg" theme="#448aff"></meting-js>
<h3 id="automatic-identification">8.2 音乐平台 URL 的自动识别</h3>
<p><code>music</code> shortcode 有一个命名参数来使用音乐平台 URL 的自动识别:</p>
<ul>
<li>
<p><strong>auto</strong> <em>[必需]]</em> (<strong>第一个</strong>位置参数)</p>
<p>用来自动识别的音乐平台 URL, 支持 <code>netease</code>, <code>tencent</code> 和 <code>xiami</code> 平台.</p>
</li>
</ul>
<p>一个使用音乐平台 URL 的自动识别的 <code>music</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">music</span> <span class="na">auto</span><span class="o">=</span><span class="s">&#34;https://music.163.com/#/playlist?id=60198&#34;</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">music</span> <span class="err">&#34;</span><span class="na">https:</span><span class="err">//</span><span class="na">music</span><span class="err">.</span><span class="na">163</span><span class="err">.</span><span class="na">com</span><span class="err">/#/</span><span class="na">playlist</span><span class="err">?</span><span class="na">id</span><span class="o">=</span><span class="s">60198&#34;</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<meting-js auto="https://music.163.com/#/playlist?id=60198" theme="#448aff"></meting-js>
<h3 id="custom-server">8.3 自定义音乐平台, 类型和 ID</h3>
<p><code>music</code> shortcode 有以下命名参数来使用自定义音乐平台:</p>
<ul>
<li>
<p><strong>server</strong> <em>[必需]</em> (<strong>第一个</strong>位置参数)</p>
<p>[<code>netease</code>, <code>tencent</code>, <code>kugou</code>, <code>xiami</code>, <code>baidu</code>]</p>
<p>音乐平台.</p>
</li>
<li>
<p><strong>type</strong> <em>[必需]</em> (<strong>第二个</strong>位置参数)</p>
<p>[<code>song</code>, <code>playlist</code>, <code>album</code>, <code>search</code>, <code>artist</code>]</p>
<p>音乐类型.</p>
</li>
<li>
<p><strong>id</strong> <em>[必需]</em> (<strong>第三个</strong>位置参数)</p>
<p>歌曲 ID, 或者播放列表 ID, 或者专辑 ID, 或者搜索关键词, 或者创作者 ID.</p>
</li>
</ul>
<p>一个使用自定义音乐平台的 <code>music</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">music</span> <span class="na">server</span><span class="o">=</span><span class="s">&#34;netease&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;song&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;1868553&#34;</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">music</span> <span class="na">netease</span> <span class="na">song</span> <span class="na">1868553</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<meting-js server="netease" type="song" id="1868553" theme="#448aff"></meting-js>
<h3 id="other-parameters">8.4 其它参数</h3>
<p><code>music</code> shortcode 有一些可以应用于以上三种方式的其它命名参数:</p>
<ul>
<li>
<p><strong>theme</strong> <em>[可选]</em></p>
<p><a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a> 音乐播放器的主题色, 默认值是 <code>#448aff</code>.</p>
</li>
<li>
<p><strong>fixed</strong> <em>[可选]</em></p>
<p>是否开启固定模式, 默认值是 <code>false</code>.</p>
</li>
<li>
<p><strong>mini</strong> <em>[可选]</em></p>
<p>是否开启迷你模式, 默认值是 <code>false</code>.</p>
</li>
<li>
<p><strong>autoplay</strong> <em>[可选]</em></p>
<p>是否自动播放音乐, 默认值是 <code>false</code>.</p>
</li>
<li>
<p><strong>volume</strong> <em>[可选]</em></p>
<p>第一次打开播放器时的默认音量, 会被保存在浏览器缓存中, 默认值是 <code>0.7</code>.</p>
</li>
<li>
<p><strong>mutex</strong> <em>[可选]</em></p>
<p>是否自动暂停其它播放器, 默认值是 <code>true</code>.</p>
</li>
</ul>
<p><code>music</code> shortcode 还有一些只适用于音乐列表方式的其它命名参数:</p>
<ul>
<li>
<p><strong>loop</strong> <em>[可选]</em></p>
<p>[<code>all</code>, <code>one</code>, <code>none</code>]</p>
<p>音乐列表的循环模式, 默认值是 <code>none</code>.</p>
</li>
<li>
<p><strong>order</strong> <em>[可选]</em></p>
<p>[<code>list</code>, <code>random</code>]</p>
<p>音乐列表的播放顺序, 默认值是 <code>list</code>.</p>
</li>
<li>
<p><strong>list-folded</strong> <em>[可选]</em></p>
<p>初次打开的时候音乐列表是否折叠, 默认值是 <code>false</code>.</p>
</li>
<li>
<p><strong>list-max-height</strong> <em>[可选]</em></p>
<p>音乐列表的最大高度, 默认值是 <code>340px</code>.</p>
</li>
</ul>
<h2 id="9-bilibili">9 bilibili</h2>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.min.svg"
        data-srcset="/svg/version/0.2.0-changed.min.svg, /svg/version/0.2.0-changed.min.svg 1.5x, /svg/version/0.2.0-changed.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 更改 | 0.2.0"
        title="LoveIt 更改 | 0.2.0" /></a>
<p><code>bilibili</code> shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器.</p>
<p>如果视频只有一个部分, 则仅需要视频的 BV <code>id</code>, 例如:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">https://www.bilibili.com/video/BV1Sx411T7QQ
</code></pre></td></tr></table>
</div>
</div><p>一个 <code>bilibili</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">bilibili</span> <span class="na">BV1Sx411T7QQ</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">bilibili</span> <span class="na">id</span><span class="o">=</span><span class="s">BV1Sx411T7QQ</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="bilibili"><iframe src="//player.bilibili.com/player.html?bvid=BV1Sx411T7QQ&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>

<p>如果视频包含多个部分, 则除了视频的 BV <code>id</code> 之外, 还需要 <code>p</code>, 默认值为 <code>1</code>, 例如:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">https://www.bilibili.com/video/BV1TJ411C7An?p=3
</code></pre></td></tr></table>
</div>
</div><p>一个带有 <code>p</code> 参数的 <code>bilibili</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">bilibili</span> <span class="na">BV1TJ411C7An</span> <span class="na">3</span> <span class="p">&gt;</span>}}
或者
{{<span class="p">&lt;</span> <span class="nt">bilibili</span> <span class="na">id</span><span class="o">=</span><span class="s">BV1TJ411C7An</span> <span class="na">p</span><span class="o">=</span><span class="s">3</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="bilibili"><iframe src="//player.bilibili.com/player.html?bvid=BV1TJ411C7An&page=3" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>

<h2 id="10-typeit">10 typeit</h2>
<p><code>typeit</code> shortcode 基于 <a href="https://typeitjs.com/" target="_blank" rel="noopener noreffer">TypeIt</a> 提供了打字动画.</p>
<p>只需将你需要打字动画的内容插入 <code>typeit</code> shortcode 中即可.</p>
<h3 id="simple-content">10.1 简单内容</h3>
<p>允许使用 <code>Markdown</code> 格式的简单内容, 并且 <strong>不包含</strong> 富文本的块内容, 例如图像等等&hellip;</p>
<p>一个 <code>typeit</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">typeit</span> <span class="p">&gt;</span>}}
这一个带有基于 [<span class="nt">TypeIt</span>](<span class="na">https://typeitjs.com/</span>) 的 <span class="gs">**打字动画**</span> 的 <span class="ge">*段落*</span>...
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">typeit</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="typeit"><div id="id-12" class=""></div></div>

<p>另外, 你也可以自定义 <strong>HTML 标签</strong>.</p>
<p>一个带有 <code>h4</code> 标签的 <code>typeit</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">typeit</span> <span class="na">tag</span><span class="o">=</span><span class="s">h4</span> <span class="p">&gt;</span>}}
这一个带有基于 [<span class="nt">TypeIt</span>](<span class="na">https://typeitjs.com/</span>) 的 <span class="gs">**打字动画**</span> 的 <span class="ge">*段落*</span>...
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">typeit</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="typeit"><h4 id="id-13" class=""></h4></div>

<h3 id="code-content">10.2 代码内容</h3>
<p>代码内容也是允许的, 并且通过使用参数 <code>code</code> 指定语言类型可以实习语法高亮.</p>
<p>一个带有 <code>code</code> 参数的 <code>typeit</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">typeit</span> <span class="na">code</span><span class="o">=</span><span class="s">java</span> <span class="p">&gt;</span>}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println(&#34;Hello World&#34;);
    }
}
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">typeit</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="typeit"><div id="id-14" class=" highlight"></div></div>

<h3 id="code-content">10.3 分组内容</h3>
<p>默认情况下, 所有打字动画都是同时开始的.
但是有时你可能需要按顺序开始一组 <code>typeit</code> 内容的打字动画.</p>
<p>一组具有相同 <code>group</code> 参数值的 <code>typeit</code> 内容将按顺序开始打字动画.</p>
<p>一个带有 <code>group</code> 参数的 <code>typeit</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">typeit</span> <span class="na">group</span><span class="o">=</span><span class="s">paragraph</span> <span class="p">&gt;</span>}}
<span class="gs">**首先**</span>, 这个段落开始
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">typeit</span> <span class="p">&gt;</span>}}

{{<span class="p">&lt;</span> <span class="nt">typeit</span> <span class="na">group</span><span class="o">=</span><span class="s">paragraph</span> <span class="p">&gt;</span>}}
<span class="gs">**然后**</span>, 这个段落开始
{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">typeit</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>呈现的输出效果如下:</p>
<div class="typeit"><div id="id-15" class=""></div></div>

<div class="typeit"><div id="id-16" class=""></div></div>

<h2 id="11-script">11 script</h2>
<a href="https://github.com/dillonzq/LoveIt/releases/tag/v0.2.8" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.8-new.min.svg"
        data-srcset="/svg/version/0.2.8-new.min.svg, /svg/version/0.2.8-new.min.svg 1.5x, /svg/version/0.2.8-new.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt 新增 | 0.2.8"
        title="LoveIt 新增 | 0.2.8" /></a>
<p><code>script</code> shortcode 用来在你的文章中插入 <strong>:(fab fa-js fa-fw): Javascript</strong> 脚本.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">脚本内容可以保证在所有的第三方库加载之后按顺序执行.
所以你可以自由地使用第三方库.</div>
        </div>
    </div>
<p>一个 <code>script</code> 示例:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{{<span class="p">&lt;</span> <span class="nt">script</span> <span class="p">&gt;}}</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Hello LoveIt!&#39;</span><span class="p">);</span>
<span class="p">{{&lt;</span> <span class="p">/</span><span class="nt">script</span> <span class="p">&gt;</span>}}
</code></pre></td></tr></table>
</div>
</div><p>你可以在开发者工具的控制台中看到输出.</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2020-03-03</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/shortcodes/">shortcodes</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/basic-markdown-syntax/" class="prev" rel="prev" title="Markdown 基本语法"><i class="fas fa-angle-left fa-fw"></i>Markdown 基本语法</a>
            <a href="/posts/theme-documentation-built-in-shortcodes/" class="next" rel="next" title="主题文档 - 内置 Shortcodes">主题文档 - 内置 Shortcodes<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">Luckly</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/lightgallery/lightgallery.min.css"><link rel="stylesheet" href="/lib/mermaid/mermaid.min.css"><link rel="stylesheet" href="/lib/mapbox-gl/mapbox-gl.min.css"><link rel="stylesheet" href="/lib/aplayer/APlayer.min.css"><link rel="stylesheet" href="/lib/aplayer/dark.min.css"><link rel="stylesheet" href="/css/2f1ef0.min.css"><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/lightgallery/lightgallery.min.js"></script><script type="text/javascript" src="/lib/lightgallery/lg-thumbnail.min.js"></script><script type="text/javascript" src="/lib/lightgallery/lg-zoom.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/typeit/typeit.min.js"></script><script type="text/javascript" src="/lib/mermaid/mermaid.min.js"></script><script type="text/javascript" src="/lib/echarts/echarts.min.js"></script><script type="text/javascript" src="/lib/echarts/macarons.min.js"></script><script type="text/javascript" src="/lib/mapbox-gl/mapbox-gl.min.js"></script><script type="text/javascript" src="/lib/mapbox-gl/mapbox-gl-language.min.js"></script><script type="text/javascript" src="/lib/aplayer/APlayer.min.js"></script><script type="text/javascript" src="/lib/meting/Meting.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"data":{"id-10":{"darkStyle":"mapbox://styles/mapbox/dark-zh-v1?optimize=true","fullscreen":null,"geolocate":null,"lat":31.233,"lightStyle":"mapbox://styles/mapbox/light-zh-v1?optimize=true","lng":121.485,"marked":true,"navigation":null,"scale":null,"zoom":12},"id-11":{"darkStyle":"mapbox://styles/mapbox/dark-zh-v1?optimize=true","fullscreen":null,"geolocate":null,"lat":37.453,"lightStyle":"mapbox://styles/mapbox/streets-zh-v1?optimize=true","lng":-122.252,"marked":false,"navigation":null,"scale":null,"zoom":10},"id-12":"这一个带有基于 \u003ca href=\"https://typeitjs.com/\" target=\"_blank\" rel=\"noopener noreffer\"\u003eTypeIt\u003c/a\u003e 的 \u003cstrong\u003e打字动画\u003c/strong\u003e 的 \u003cem\u003e段落\u003c/em\u003e\u0026hellip;","id-13":"这一个带有基于 \u003ca href=\"https://typeitjs.com/\" target=\"_blank\" rel=\"noopener noreffer\"\u003eTypeIt\u003c/a\u003e 的 \u003cstrong\u003e打字动画\u003c/strong\u003e 的 \u003cem\u003e段落\u003c/em\u003e\u0026hellip;","id-14":"\u003cbr /\u003e\u003cspan class=\"kd\"\u003epublic\u003c/span\u003e\u0026nbsp;\u003cspan class=\"kd\"\u003eclass\u003c/span\u003e\u0026nbsp;\u003cspan class=\"nc\"\u003eHelloWorld\u003c/span\u003e\u0026nbsp;\u003cspan class=\"o\"\u003e{\u003c/span\u003e\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cspan class=\"kd\"\u003epublic\u003c/span\u003e\u0026nbsp;\u003cspan class=\"kd\"\u003estatic\u003c/span\u003e\u0026nbsp;\u003cspan class=\"kt\"\u003evoid\u003c/span\u003e\u0026nbsp;\u003cspan class=\"nf\"\u003emain\u003c/span\u003e\u003cspan class=\"o\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003eString\u003c/span\u003e\u0026nbsp;\u003cspan class=\"o\"\u003e[]\u003c/span\u003e\u003cspan class=\"n\"\u003eargs\u003c/span\u003e\u003cspan class=\"o\"\u003e)\u003c/span\u003e\u0026nbsp;\u003cspan class=\"o\"\u003e{\u003c/span\u003e\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cspan class=\"n\"\u003eSystem\u003c/span\u003e\u003cspan class=\"o\"\u003e.\u003c/span\u003e\u003cspan class=\"na\"\u003eout\u003c/span\u003e\u003cspan class=\"o\"\u003e.\u003c/span\u003e\u003cspan class=\"na\"\u003eprintln\u003c/span\u003e\u003cspan class=\"o\"\u003e(\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;Hello\u0026nbsp;World\u0026#34;\u003c/span\u003e\u003cspan class=\"o\"\u003e);\u003c/span\u003e\u003cbr /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cspan class=\"o\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003cspan class=\"o\"\u003e}\u003c/span\u003e\u003cbr /\u003e","id-15":"\u003cstrong\u003e首先\u003c/strong\u003e, 这个段落开始","id-16":"\u003cstrong\u003e然后\u003c/strong\u003e, 这个段落开始","id-2":"\r\ngraph LR;\r\n    A[Hard edge] --\u003e|Link text| B(Round edge)\r\n    B --\u003e C{Decision}\r\n    C --\u003e|One| D[Result one]\r\n    C --\u003e|Two| E[Result two]\r","id-3":"\r\nsequenceDiagram\r\n    participant Alice\r\n    participant Bob\r\n    Alice-\u003e\u003eJohn: Hello John, how are you?\r\n    loop Healthcheck\r\n        John-\u003eJohn: Fight against hypochondria\r\n    end\r\n    Note right of John: Rational thoughts \u003cbr/\u003eprevail...\r\n    John--\u003eAlice: Great!\r\n    John-\u003eBob: How about you?\r\n    Bob--\u003eJohn: Jolly good!\r","id-4":"\r\ngantt\r\n    dateFormat  YYYY-MM-DD\r\n    title Adding GANTT diagram functionality to mermaid\r\n    section A section\r\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\r\n    Active task               :active,  des2, 2014-01-09, 3d\r\n    Future task               :         des3, after des2, 5d\r\n    Future task2               :         des4, after des3, 5d\r\n    section Critical tasks\r\n    Completed task in the critical line :crit, done, 2014-01-06,24h\r\n    Implement parser and jison          :crit, done, after des1, 2d\r\n    Create tests for parser             :crit, active, 3d\r\n    Future task in critical line        :crit, 5d\r\n    Create tests for renderer           :2d\r\n    Add to mermaid                      :1d\r","id-5":"\r\nclassDiagram\r\n    Class01 \u003c|-- AveryLongClass : Cool\r\n    Class03 *-- Class04\r\n    Class05 o-- Class06\r\n    Class07 .. Class08\r\n    Class09 --\u003e C2 : Where am i?\r\n    Class09 --* C3\r\n    Class09 --|\u003e Class07\r\n    Class07 : equals()\r\n    Class07 : Object[] elementData\r\n    Class01 : size()\r\n    Class01 : int chimp\r\n    Class01 : int gorilla\r\n    Class08 \u003c--\u003e C2: Cool label\r","id-6":"\r\nstateDiagram\r\n    [*] --\u003e Still\r\n    Still --\u003e [*]\r\n    Still --\u003e Moving\r\n    Moving --\u003e Still\r\n    Moving --\u003e Crash\r\n    Crash --\u003e [*]\r","id-7":"\r\ngitGraph:\r\noptions\r\n{\r\n    \"nodeSpacing\": 100,\r\n    \"nodeRadius\": 10\r\n}\r\nend\r\n    commit\r\n    branch newbranch\r\n    checkout newbranch\r\n    commit\r\n    commit\r\n    checkout master\r\n    commit\r\n    commit\r\n    merge newbranch\r","id-8":"\r\npie\r\n    \"Dogs\" : 386\r\n    \"Cats\" : 85\r\n    \"Rats\" : 15\r","id-9":"{\"grid\":{\"bottom\":\"5%\",\"containLabel\":true,\"left\":\"5%\",\"right\":\"5%\",\"top\":\"20%\"},\"legend\":{\"data\":[\"邮件营销\",\"联盟广告\",\"视频广告\",\"直接访问\",\"搜索引擎\"],\"top\":\"10%\"},\"series\":[{\"data\":[120,132,101,134,90,230,210],\"name\":\"邮件营销\",\"stack\":\"总量\",\"type\":\"line\"},{\"data\":[220,182,191,234,290,330,310],\"name\":\"联盟广告\",\"stack\":\"总量\",\"type\":\"line\"},{\"data\":[150,232,201,154,190,330,410],\"name\":\"视频广告\",\"stack\":\"总量\",\"type\":\"line\"},{\"data\":[320,332,301,334,390,330,320],\"name\":\"直接访问\",\"stack\":\"总量\",\"type\":\"line\"},{\"data\":[820,932,901,934,1290,1330,1320],\"name\":\"搜索引擎\",\"stack\":\"总量\",\"type\":\"line\"}],\"title\":{\"left\":\"center\",\"text\":\"折线统计图\",\"top\":\"2%\"},\"toolbox\":{\"feature\":{\"saveAsImage\":{\"title\":\"保存为图片\"}}},\"tooltip\":{\"trigger\":\"axis\"},\"xAxis\":{\"boundaryGap\":false,\"data\":[\"周一\",\"周二\",\"周三\",\"周四\",\"周五\",\"周六\",\"周日\"],\"type\":\"category\"},\"yAxis\":{\"type\":\"value\"}}"},"lightGallery":{"actualSize":false,"exThumbImage":"data-thumbnail","hideBarsDelay":2000,"selector":".lightgallery","speed":400,"thumbContHeight":80,"thumbWidth":80,"thumbnail":true},"mapbox":{"RTLTextPlugin":"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js","accessToken":null},"typeit":{"cursorChar":null,"cursorSpeed":null,"data":{"id-12":["id-12"],"id-13":["id-13"],"id-14":["id-14"],"paragraph":["id-15","id-16"]},"duration":null,"speed":null}};</script><script type="text/javascript" src="/js/theme.min.js"></script><script type="text/javascript">
console.log('Hello LoveIt!');</script></body>
</html>
